<template>
    <div class="little">
        <h5>LittleBlock</h5>
        <p>孙组件通过 inject 拿到 car: {{ car.name }} / ￥{{ car.price }}</p>
        <Dialog />
        <hr>
        <Suspense>
            <template v-slot:default>
                <SlowDemo></SlowDemo>
            </template>
            <template v-slot:fallback>
                <div>
                    <h1>loading!!!</h1>
                </div>
            </template>
        </Suspense>

    </div>
</template>

<script setup>
import { inject, defineAsyncComponent } from 'vue'
import Dialog from './Dialog.vue'
// import SlowDemo from './SlowDemo.vue'
//不用异步导入,也可以实现异步组件的样子,不是很懂,先这样
const SlowDemo = defineAsyncComponent(() => import('./SlowDemo.vue'))
const car = inject('car')
</script>

<style scoped>
.little {
    background: #ffcc80;
    padding: 20px;
    margin-left: 20px;
}
</style>